<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申报表确认</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <script src="http://api.map.baidu.com/api?v=2.0&ak=CbEp1BSfeMw7rHxyoweInIRWFBQYh4hC"></script>
</head>

<body>
    <div class="container my-2">
        <div class="accordion">
            <div class="accordion-item ">
                <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                    <button class="accordion-button py-2" type="button" data-bs-toggle="collapse"
                        data-bs-target="#panelsStayOpen-collapseOne">
                        申报表确认
                    </button>
                </h2>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-2 accordion-collapse collapse show py-2"
                    id="panelsStayOpen-collapseOne">
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">申报表号</span>
                            <input type="number" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">指令单号</span>
                            <input type="number" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">发动机号</span>
                            <input type="text" class="form-control" id="" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">产品型号</span>
                            <input type="text" class="form-control" id="" readonly value="LR4V5UP-T70X-U3">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">故障<br>地点
                                <br />
                                <a class=" bi-geo-alt ms-2 me-1" id="position"></a>
                            </span>
                            <textarea class="form-control" id="malfunctionAddress"></textarea>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">故障详述</span>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">所属省区</span>
                            <input type="text" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">所属市县</span>
                            <input type="text" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">修复日期</span>
                            <input type="date" class="form-control" id="">
                        </div>
                    </div>

                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">工作小时</span>
                            <input type="number" class="form-control" id="" required>
                        </div>
                    </div>

                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">配套厂家</span>
                            <input type="text" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">配套产品</span>
                            <input type="text" class="form-control" id="" readonly>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">客户电话</span>
                            <input type="tel" class="form-control" id="">
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <label class="input-group-text  bg-warning" for="serverCheck">确认</label>
                            <!-- <span class="input-group-text  bg-warning"><label for="serverCheck">确认</label></span> -->
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" value="" id="serverCheck">
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">服务公里</span>
                            <input type="number" class="form-control" id="">
                            <span class="input-group-text"><a href="#">GPS<i class="bi bi-geo-alt ms-2"></i></a></span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group input-group-sm">
                            <label class="input-group-text" for="s">上线</label>
                            <div class="input-group-text me-2">
                                <input class="form-check-input mt-0" type="checkbox" value="" id="s">
                            </div>
                            <label class="input-group-text" for="z">政策</label>
                            <div class="input-group-text me-2">
                                <input class="form-check-input mt-0" type="checkbox" value="" id="z">
                            </div>
                            <label class="input-group-text" for="j">结构</label>
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" value="" id="j">
                            </div>
                        </div>
                    </div>

                    <!-- <div class="w-100"></div> -->
                    <div class="col offset-sm-6 offset-lg-4 offset-xl-9">
                        <div class="d-flex justify-content-end">
                            <!-- <button class="btn btn-primary btn-sm me-2" id="mySubmit">提交申报表</button> -->
                            <button class="btn btn-primary btn-sm me-2" id="mySubmit">Submit form</button>
                            <a class="btn btn-outline-secondary btn-sm me-2">上传图片<i
                                    class="bi bi-card-image ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse"
                        data-bs-target="#amendsTempItem">
                        赔偿物料
                    </button>
                </h2>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-2 accordion-collapse collapse p-2"
                    id="amendsTempItem">
                    <a class="btn btn-primary btn-sm me-1" data-bs-toggle="offcanvas" href="#offcanvasExample"
                        role="button" aria-controls="offcanvasExample">
                        Link with href
                    </a>
                    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                        Button with data-bs-target
                    </button>

                    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
                        aria-labelledby="offcanvasExampleLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasExampleLabel">侧边栏头部</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <div>
                                Some text as placeholder. In real life you can have the elements you have chosen. Like,
                                text, images, lists,
                                etc.
                            </div>
                            <div class="dropdown mt-3">
                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"
                                    id="dropdownMenuButton" data-bs-toggle="dropdown">
                                    Dropdown button
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <li><a class="dropdown-item" href="http://www.baidu.com" target="_blank">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#" data-bs-dismiss="offcanvas">Another action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#" id="something"
                                            data-bs-dismiss="offcanvas">Something else here</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse"
                        data-bs-target="#serverFare">
                        服务费用
                    </button>
                </h2>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-2 accordion-collapse collapse p-2"
                    id="serverFare">
                    <input type="text" class="form-control" id="areaID">
                    <button class = "btn btn-primary btn-sm" type="button" id="areaList">Area list</button>
                </div>
            </div>
        </div>


    </div>
    <script src="js/jquery.min.js"></script>
    <script src="Bootstrap/js/bootstrap.bundle.js"></script>
    <script src="js/holder.js"></script>
    <script>

        $("#position").click(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    let location_lon = position.coords.longitude;
                    let location_lat = position.coords.latitude;
                    let myGeo = new BMap.Geocoder({ extensions_town: true });
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new BMap.Point(location_lon, location_lat), function (result) {
                        if (result) {
                            document.getElementById('malfunctionAddress').value = result.address;
                        }
                    });
                });
            } else {
                alert("您的设备不支持定位功能");
            }
        });

        $("#areaList").click(function () {
            // $.ajax({
            //     type: 'get',
            //     dataType:'JSON',
            //     url: 'http://we.jsfw.net/bs/ajax/server/arealist.php',
            //     success: function (data) {
            //         let {AreaID:areaID,AreaName:areaName} = data[0];
            //         console.log(areaID,areaName);
            //         console.log(data[0]);
            //     },
            //     error: function () {
            //         alert('Ajax获取数据失败!');
            //     }
            // });
            
            //获取区域列表
            let areaID = document.getElementById("areaID").value;
            const url = 'http://we.jsfw.net/bs/ajax/server/arealist.php';
            fetch(url,{
                method:'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body:"areaid=" + areaID
            })
            .then((response)=>{
                response.json().then((value)=>{
                    value.forEach((item) => {
                        let {AreaID:areaID,AreaName:areaName} = item;
                        console.log(areaID,areaName);
                    })
                })
            })
        })
    </script>
</body>

</html>